<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>插槽更注重html结构的传递，调用同样的子组件但是需要在子组件中显示不同结构的内容时，应该用插槽</p>
    <p>传值更注重数据，调用同样的子组件结构相同数据不同时，应该用传值</p>
    <div id="app">
        <p>我是一名保安，喜欢业主小潘。</p>
        <jiulz>
            <ul slot="bottom">
                <li>html</li>
                <li>css</li>
                <li>js</li>
            </ul>
            <mark slot="top">hello</mark>
        </jiulz>
        <jiulz>
            <table slot="bottom">
                <tr>
                    <td>123</td>
                </tr>
            </table>
        </jiulz>
    </div>
    <template id="jiulz">
        <div>
            <p>铁剑等人攻入鬼丸城与之展开激战，结果风神剑被毁、雷神珠也遗失</p>
            <!-- 匿名插槽，没有限制,收容所，接纳无家可归的人 -->
            <!-- <slot></slot> -->
            <!-- 具名插槽,各回各家，各找各妈 -->
            <slot name="top"></slot>
            <slot name="bottom"></slot>
        </div>
    </template>
    <script src="../0511/js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                info: ''
            },
            components: {
                jiulz: {
                    template: '#jiulz'
                }
            }
        })
    </script>
</body>

</html>